*{
	margin:0;padding:0;
	-webkit-box-sizing: border-box;
}
li{
	list-style: none;
}
.left{
	float: left;
	width:250px;
	height:600px;
	border:1px solid #ccc;
	border-width: 0 1px;
	padding-left:10px;
}
.left li{
	margin:10px 10px 0 0;
	float: left;
	width:58px;
	height:58px;
	border:1px solid #fff;
	display: block;
}
.left li:hover{
	border:1px solid #fd9711;
}
.left li img{
	display: block;
}
.middle{
	float: left;
	background: #ccc;
	padding:10px;
	width:620px;
	height:620px;
}
.middle .wrapper{
	background:#fff;
}
.right{
	float: left;
	width:140px;
	border:1px solid #ccc;
	border-width:0px 1px;
}
.right .up,.right .down{
	height:20px;
	line-height: 20px;
	background:#000;
	text-align: center;
	color:#fff;
}
.right .up{
	position: absolute;
	top:0;
	width:140px;
}
.right .down{
	position: absolute;
	bottom:0;
	width:140px;
}
.right .image-list{
	padding:0px 5px;
}
.right .image-list li{
	margin:5px 0 0;
}
.right .image-list img{
	display: block;
	width:100%;
}
.content{
	border:1px solid #ccc;
	border-width:1px 0;
	display: inline-block;
	margin:50px auto;
	position: relative;
	left:50%;
	margin-left: -502px;
}
.middle .wrapper{
	display: -webkit-box; 
	display: box;
	padding:5px;
}
.middle .wrapper .col{
	-webkit-box-flex:1; 
	box-flex:1;
	border:1px dashed #000;
	margin:5px;
	overflow: hidden;
}